<template>
	<view >
		<view
			class="head-bg h-464" 
			:style="{
				'background': `url(${getImg('integralRecord-bg')}) no-repeat center center`,
			}"
		>
			<head-nav
				bgColor="rgba(0,0,0,0)" 
				title="积分记录"
			>
			</head-nav>
			<view class="head-info flex-a ju-bt mar-t48 padlr80 flex pos-rel">
				<view class="head-l">
					<view class="head-tit">
						积分余额
					</view>
					<view class="head-val">
						312
					</view>
					<view class="head-overdue flex-a">
						<u--image
							:showLoading="true" 
							:src="getImg('tips-icon2')"
							width="28rpx" 
							height="28rpx"
							
						></u--image>
						<text class="mar-l6">预计12月过期922积分</text>
					</view>
				</view>
				<u--image
					:showLoading="true" 
					:src="getImg('Integral-img')"
					width="242rpx" 
					height="180rpx" 
				></u--image>
			</view>
		</view>
		<view
			class="tabs-box"
		>
			 <u-tabs 
				:list="tabsList"
				lineColor="#FF7171"
				:current="tabsCurrent"
				lineWidth="60rpx"
				lineHeight="4prx"
				:activeStyle="{
					color: '#FF7171',
				}"
				@change="tabsChange"
				:scrollable="false"
			></u-tabs>
		</view>
		<u-line color="#E6E6E6"></u-line>
		<view class="list-box">
			<view class="list-li padlr24 pad-t34" v-for="(item, index) in list" :key="index">
				<view class="flex-a ju-bt">
					<view class="">
						<view class="li-tit">
							购买恒采之能奢宠精华乳
						</view>
						<view class="li-tips mar-t22">
							2024-10-10 09:22:14
						</view>
					</view>
					<view class="li-num">
						{{ tabsCurrent != 2 ? '+' : '-' }}200
					</view>
				</view>
				<u-line v-if="list.length - 1 > index" margin="32rpx 0 0" color="#E6E6E6"></u-line>
			</view>
		</view>
	</view>
</template>

<script> // 积分记录
	export default {
		data() {
			return {
				tabsCurrent: 0,
				tabsList: [
					{
						name: '全部记录',
					}, 
					{
						name: '收入记录',
					}, 
					{
						name: '支出记录',
					}, 
				],
				list: [1,1,1,1],
			}
		},
		onLoad() {
			
		},
		methods: {
			tabsChange(eve) {
				this.tabsCurrent = eve.index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-box {
		.list-li {
			.li-tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #111111;
			}
			.li-tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
			}
			.li-num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #111111;
			}
		}
	}
	.head-info {
		.head-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #111111;
		}
		.head-val {
			font-family: MiSans, MiSans;
			font-weight: 500;
			font-size: 80rpx;
			color: #000000;
		}
		.head-overdue {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
	}
	.head-bg {
		height: 464rpx;
		background-size: 100% 100% !important;
	}
</style>
<style>
	page {
		background: #fff;
	}
</style>
